<template>
    <div class="super-value">
        <div class="list">
            <ul class="clearfix">
                <li class="fl" @click="queryParam.rangeType='all',queryParam.runTypeEnum='group',button='a',loginNow()" :class="{'active':button=='a'}">
                    <img src="../../assets/imgs/tour/one.png" alt="" srcset="">
                    <p>跟团游</p>
                </li>
                <li class="fl" @click="queryParam.rangeType='all',queryParam.runTypeEnum='freeTravel',button='b',loginNow()" :class="{'active':button=='b'}">
                    <img src="../../assets/imgs/tour/two.png" alt="" srcset="">
                    <p>自由行</p>
                </li>
                <li class="fl" @click="queryParam.rangeType='onDay',queryParam.runTypeEnum='group',button='c',loginNow()" :class="{'active':button=='c'}">
                    <img src="../../assets/imgs/tour/three.png" alt="" srcset="">
                    <p>一日游</p>
                </li>
                <li class="fl" @click="queryParam.rangeType='nearby',queryParam.runTypeEnum='group',button='d',loginNow()" :class="{'active':button=='d'}">
                    <img src="../../assets/imgs/tour/four.png" alt="" srcset="">
                    <p>上海周边</p>
                </li>
                <li class="fl" @click="queryParam.rangeType='domestic',queryParam.runTypeEnum='group',button='e',loginNow()" :class="{'active':button=='e'}">
                    <img src="../../assets/imgs/tour/five.png" alt="" srcset="">
                    <p>国内游</p>
                </li>
            </ul>
        </div>
        <div class="tour">
            <ul>
                <li class="clearfix" @click="gotoProductDtl(lists.id)" v-for="lists in list">
                    <div class="lf fl">
                        <img :src="lists.picture" alt="">
                    </div>
                        <div class="lr fl">
                            <div class="top">
                                <!-- <span class="one">【蓄康荟】</span> -->
                                <span class="two" v-if="lists.isSelfSupport==true">【蓄乐游】</span>
                                <span>{{lists.title}}</span>
                            </div>
                            <div class="center clearfix">
                                <p class="fl one">{{lists.departCity}}出发</p>
                                <p class="fl two" v-if="lists.hasExtraFit==true">无自费</p>
                                <p class="fl two" v-if="lists.hasExtraFit==false">无自费</p>
                                <p class="fl three" v-if="lists.hasShoppingAction==true">无购物</p>
                                <p class="fl three" v-if="lists.hasShoppingAction==false">无购物</p>
                            </div>
                            <div class="bottom clearfix">
                                <p class="fl one">已售{{lists.soldNum}}</p>
                                <p class="fr two">市场价{{lists.vipprice}}元 </p>
                                <p class="fr three">
                                    <span>¥</span>
                                    <span>{{lists.price}}</span>
                                    <span>元</span>
                                </p>
                            </div>
                        </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            isAshow: false,
            userToken: '',
            list: [],
            button: '',
            queryParam: {
                // orgId: 0,
                // organizationCode: "string",
                page: 0,
                rangeType: "all",
                runTypeEnum: "all",
                size: 20
            }
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        //  let poctId = this.$route.query.productId;
        // if (!this.userToken) {
        //     this.$router.push('/index')
        // }
        this.loginNow()
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        loginNow: async function () {
            const res = await httpr.post('tour_search/list_tour_by_type', this.queryParam)
            // console.log(res);
            if (res.data.code == 100) {
                // Toast({ message: res.data.message, duration: 1000 })
                this.list = res.data.data.list
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        gotoProductDtl: function (pid) {
            this.$router.push({ path: '/tourProduct', query: { 'id': pid } })
            // Toast({ message: res.data.message, duration: 1000 })
        }
    }
}
</script>

<style lang="stylus" scoped>
.super-value {
    .list {
        // padding: 0 30px;
        margin-top: 10px;

        ul {
            border-bottom: 12px solid rgba(240, 240, 240, 1);

            li {
                padding-bottom: 15px;
                width: 75px;
                text-align: center;

                img {
                    margin: 0 auto;
                    width: 32px;
                    height: 32px;
                    display: block;
                }

                p {
                    color: #333;
                    font-size: 12px;
                    margin-top: 5px;
                }
            }

            .active {
                border-bottom: 2px solid #8FC31F;
            }
        }
    }

    .tour {
        ul {
            margin: 0 12px;

            li {
                padding: 12px 0;
                border-bottom: 1px solid rgba(240, 240, 240, 1);

                .lf {
                    width: 100px;
                    height: 100px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .lr {
                    width: 230px;
                    height: 100px;
                    margin-left: 12px;
                    position: relative;

                    .top {
                        color: #333;
                        font-size: 14px;

                        .two {
                            color: #FF0000;
                        }
                    }

                    .center {
                        margin-top: 10px;
                        color: #999;
                        font-size: 12px;
                        height: 14px;
                        line-height: 14px;

                        .two {
                            margin: 0 10px;
                            padding: 0 10px;
                            border-left: 1px solid rgba(153, 153, 153, 1);
                            border-right: 1px solid rgba(153, 153, 153, 1);
                        }
                    }

                    .bottom {
                        width: 100%;
                        position: absolute;
                        bottom: 0px;
                        left: 0px;
                        color: #999;
                        font-size: 12px;

                        .two {
                            text-decoration: line-through;
                        }

                        .three {
                            margin-right: 10px;

                            span:nth-child(1) {
                                color: #FF7E00;
                            }

                            span:nth-child(2) {
                                font-size: 16px;
                                color: #FF7E00;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
